<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车练习</title>
    <link rel="stylesheet" href="../libs/bootstrap/css/bootstrap.min.css">
</head>
<body ng-app="cart" ng-controller="CartController">
<div class="container">
    <table class="table">
        <thead>
        <tr>
            <th>产品编号</th>
            <th>产品名字</th>
            <th>购买数量</th>
            <th>产品单价</th>
            <th>产品总价</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in cart" ng-if="cart.length != 0">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>
                    <input type="number" min="0" max="100" class="form-control" ng-model="item.quantity">
                </td>
                <td><span class="text-danger">￥</span>{{item.price}}</td>
                <td><span class="text-danger">￥</span>{{item.price * item.quantity}} </td>
                <td>
                    <button type="button" class="btn btn-danger" ng-click="remove($index)">移除</button>
                </td>
            </tr>
            <tr ng-if="cart.length == 0">
                <td colspan="6">暂无数据</td>
            </tr>

            <tr>
                <td colspan="2">
                    总价  {{totalPrice()}}
                </td>
                <td colspan="2">
                    总购买数量  {{totalQuantity()}}
                </td>

                <td colspan="2">
                    <button type="button" class="btn btn-danger" ng-click="cart = []">清空购物车</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>
<script src="../libs/AngularJS.min.js"></script>
<script>
    angular
        .module('cart', [])
        .controller('CartController', ['$scope', function ($scope) {
            $scope.cart = [
                {
                    id:1000,
                    name:'iphone 5s',
                    quantity:3,
                    price:4300
                },
                {
                    id:3300,
                    name:'iphone 5',
                    quantity:30,
                    price:3300
                },
                {
                    id:250,
                    name:'Mac',
                    quantity:13,
                    price:14300
                },
                {
                    id:540,
                    name:'IPAD',
                    quantity:5,
                    price:2800
                }
            ];

            $scope.totalPrice = function () {
                var price = 0;
                angular.forEach($scope.cart,function (item) {
                    price += item.price * item.quantity;
                })
                return price + '￥';
            }

            // 计算总购买数
            $scope.totalQuantity = function () {
                var num = 0;
                angular.forEach($scope.cart,function (item) {
                    num += item.quantity;
                })
                return num + '件';
            }

            $scope.remove = function (id) {
                $scope.cart.splice(id,1);
            }
        }]);
</script>